import React, { Component } from 'react'
import { Text, StyleSheet, View, FlatList, StatusBar, RefreshControl } from 'react-native'

export default class FlatListDemo extends Component {
  constructor(props) {
    super(props)
    
    this.state = {
      isLoading: false,
      list: [
        {
          id: '1',
          title: 'Item 1',
        },
        {
          id: '2',
          title: 'Item 2',
        },
        {
          id: '3',
          title: 'Item 3',
        },
        {
          id: '4',
          title: 'Item 4',
        },
        {
          id: '5',
          title: 'Item 5',
        },
        {
          id: '6',
          title: 'Item 6',
        },
        {
          id: '7',
          title: 'Item 7',
        },
        {
          id: '8',
          title: 'Item 8',
        },
        {
          id: '9',
          title: 'Item 9',
        },
      ]
    }
  }

  renderItem = ({ index, item }) => {
    return (
      <View style={styles.item}>
        <Text style={styles.title}>{item.title}</Text>
      </View>
    );
  }

  reachBottom = () => {
    alert('到底了')
  }

  loadData = () => {
    this.setState({
      isLoading: true
    })

    // 模拟网络请求
    setTimeout(() => {
      // 模拟请求数据
      alert('刷新请求数据')
      
      this.setState({
        isLoading: false,
      })
    }, 2000);
  }

  render() {
    return (
      <FlatList
        ListHeaderComponent={() => { // 自定义头部
          return <View style={[styles.header]}>
          <Text style={{fontSize: 30}}>列表头部</Text>
          </View>
        }}
        // stickyHeaderIndices={[0]} // 置顶索引
        initialScrollIndex={0} // 初始索引
        data={this.state.list} // 数据
        renderItem={this.renderItem} // 渲染项目
        keyExtractor={item => item.id} // 唯一索引
        ItemSeparatorComponent={() => { // 分割线
          return <View style={[styles.separator]}></View>;
        }}
        onEndReached={() => { // 触底事件（上拉刷新）
          this.reachBottom() 
        }}
        onEndReachedThreshold={0.1} // 声明距离底部的比率
        horizontal={false} // 是否水平
        numColumns={1} // 列数
        // 下拉刷新
        refreshing={this.state.isLoading}
        onRefresh={() => { 
          this.loadData(); // 下拉刷新加载数据
        }}
        // 设置刷新样式
        refreshControl={
          <RefreshControl
            title={"Loading"} // android中设置无效
            colors={["red"]} // android
            tintColor={"red"} // ios
            titleColor={"red"}
            refreshing={this.state.isLoading}
            onRefresh={() => {
              this.loadData(); // 下拉刷新加载数据
            }}
          />
        }
        ListFooterComponent={() => { // 自定义尾部
          return <Text style={[styles.footer]}>---- 没有更多了 ----</Text>
        }}
      />
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: StatusBar.currentHeight || 0,
  },
  item: {
    backgroundColor: '#f9c2ff',
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
  },
  title: {
    fontSize: 32,
  },
  header: {
    fontSize: 20, 
    margin: 20
  },
  footer: {
    fontSize: 20, 
    textAlign: 'center', 
    marginVertical: 40
  },
  separator: {
    borderBottomWidth: 1, 
    borderBottomColor: 'red', 
    marginHorizontal: 10
  }
});
